<template>
  <div class="particular-vip">
    <!-- 消息列表 -->
    <div v-if="data.isBan" class="message-list">
      <div>
        <el-input
          v-model="datas.key"
          style="width: 240px; margin-left: 30px"
          placeholder="请输入相关内容"
          :prefix-icon="Search"
        />
      </div>
      <div style="border: 1px solid #eee; width: 100%; margin-top: 8px"></div>
      <div v-loading="data.loading" v-if="data.informationData.length > 0">
        <ul>
          <li
            v-for="item in data.informationData"
            :key="item.id"
            @click="informationxx(item)"
            class="message-item"
          >
            <div class="message-preview">
              <span class="message-time">item.createTime</span>
              {{ item.createTime }}
              <div :class="item.zt == 0 ? 'circle' : 'circles'"></div>
              <br />
              <span class="message-title">{{ item.content }}</span
              ><br />
              <span class="message-name">{{ item.receiveManName }}</span>
            </div>
          </li>
          <!-- 更多消息 -->
        </ul>
      </div>
      <div v-if="data.informationData.length == 0" style="margin-top: 30px">
        <label style="margin-left: 80px">暂时没有更多消息</label>
      </div>
    </div>
    <!-- 详情页面 -->
    <div v-if="!data.isBan" class="message-details">
      <div style="display: flex">
        <div @click="data.isBan = true" style="width: 50px">
          <i style="font-size: 14px" class="iconfont icon-fanhui"> 返回</i>
        </div>
        <div style="width: 220px">
          <label style="float: right">{{ informationxx.receiveManName }}</label>
        </div>
      </div>

      <div>
        <div class="message-content">
          <el-scrollbar height="100%">
            {{ informationxx.content }}
          </el-scrollbar>
        </div>
      </div>
      <!-- <div>
        <el-input
          v-model="data.textarea"
          style="width: 266px; margin-left: 4px"
          placeholder="请输入回复内容"
          :rows="4"
          type="textarea"
        />
      </div>
      <div class="message-btn">
        <el-button
          :disabled="data.textarea == '' ? true : false"
          style="float: right; margin-right: 18px; width: 100px"
          type="primary"
          >回复</el-button
        >
      </div> -->
    </div>
  </div>
</template>

<script setup lang="ts">
import { reactive, onMounted, watch } from "vue";
import { Search } from "@element-plus/icons-vue";
import { Get_Pagination } from "@/api/information";

const data = reactive({
  informationData: [],
  informationxx: {},
  isBan: true,
  loading: false,
  textarea: "",
});

const datas = reactive({
  page: 1,
  limit: 10,
  total: 0,
  key: "",
});

//详细
const informationxx = (item: any) => {
  data.isBan = false;
  data.informationxx = item;
};

// 获取数据
const bind = async () => {
  data.loading = true;
  const res = await Get_Pagination({
    ...datas,
  });
  if (res.code >= 0) {
    data.informationData = res.data.data;
    console.log(data.informationData);
    data.loading = false;
  }
};

onMounted(() => {
  bind();
});

// 监听数据变化
watch([datas], (newVal, oldVal) => {
  bind();
});
</script>

<style scoped>
.particular-vip {
  width: calc(100% - 36px);
  height: calc(600px - 16px);
  padding: 10px 16px 14px 14px;
  background-color: #fff;
  border-radius: 10px;
}

.message-list {
  width: 100%;
}

.message-list ul {
  list-style: none;
}

.message-item {
  padding: 10px;
  border-bottom: 1px solid #eee;
  cursor: pointer;
  margin-left: -30px;
  position: relative;
}

.message-item:hover {
  background-color: #f9f9f9;
}

.message-preview {
  width: 100%;
  margin-left: -10px;
  height: 60px;
}

.message-time {
  font-size: 13px;
  color: #999;
  margin: 0 10px 0 10px;
}

.message-title {
  margin-left: 20px;
}

.message-name {
  font-size: 13px;
  color: #999;
  float: right;
}
.circle {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: red;
  position: absolute;
  top: 11px;
  left: 260px;
}
.circles {
  display: none;
}

/* 详细 */
.message-details {
  width: 100%;
  height: 600px;
  margin: 8px;
}

.message-content {
  width: calc(100% - 44px);
  height: 360px;
  margin: 16px 8px 16px 4px;
  border: rgb(230, 238, 250) solid 1px;
  padding: 8px;
  border-radius: 4px;
}

.message-btn {
  margin-top: 16px;
  width: 100%;
  height: 30px;
  margin-right: 10px;
}
</style>
